<template>
    <div class="centerSprite">
      <div id="header">
        <Header />
      </div>
      <div class="centerList">
        <HeaderSide :defaultIndexs="defaultIndex" />
          <div class="container">
              <p class="breadClum">
                <a href="" >新闻>></a>
                <a href="">中央精神</a>
              </p>
            <div class="spriteList">
                <p class="spriteTitle">
                  中央精神
                </p>
                <ul class="spriteUl">
                  <li>
                    <router-link  :to="{path:'/article',query:{id:0}}">
                        <a >
                          潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                        </a>
                    </router-link>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                  <li>
                    <a href="">
                      潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                    </a>
                    <span>[2018年10月18日]</span>
                  </li>
                </ul>
            </div>
            <div class="pageContainer">
              <a class="current">
                  1
              </a>
              <a >
               2
              </a>
              <a >
                3
              </a>
              <a >
                4
              </a>
              <a >
                5
              </a>
              <a >
                ...
              </a>
              <a href="">下一页</a>
              <a href="">尾页</a>

            </div>
          </div>
      </div>
      <div id="footer">
        <Footer />
      </div>
    </div>
</template>

<script>
  import header from  '../components/header.vue'
  import footer from '../components/footer.vue'
  import headerSide from '../components/side.vue'
  export default({
    data(){
        return {
          defaultIndex:0
        }
    },
    computed:{

    },
    components:{
      Header:header,
      Footer:footer,
      HeaderSide:headerSide
    },
    methods:{
      select(index){
          this.index= index
      }
    }
  })
</script>
<style   >

.breadClum a{
  font-size:16px;
  color:#6d6d6d;
}
.headerSide .container{
  overflow: hidden;
}
.centerList{
    background-image:url("../../static/images/list.jpg");
    background-position: center;
    background-repeat: no-repeat;
    /*height: 1248px;*/
    /*margin-top: -156px;*/
}
/*.headerSide .container  ul{*/
  /*background: rgba(0,0,0,0.4) !important; ;*/
/*}*/
/*.headerSide .container ul li.first{*/
  /*font-size: 36px;*/
  /*color: red !important;*/
/*}*/
/*.headerSide .container ul li.first a{*/
  /*font-size: 36px;*/
/*}*/
.spriteList .spriteTitle{
  font-size: 28px;
  color: #ed4442;
  font-weight: bold;
  padding-top: 45px;
  padding-bottom: 20px;
}
.spriteUl  li{
  padding-bottom: 6px;
}
.spriteUl  li>a{
  font-size: 16px;
  color: #000;
  position: relative;
  padding-left: 12px;
  display: inline-block;
  width: 828px;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  line-height: 25px;

}
.spriteUl  li a:before{
  position: absolute;
  content: '';
  left: 2px;
  top:50%;
  width: 4px;
  height: 4px;
  background: #626262;
  margin-top: -2px;
}
.spriteUl  li  span{
  float: right;
  vertical-align: top;
}
.pageContainer{
  text-align: center;
  padding: 50px 0;
}
  .pageContainer a{
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #000;
    margin-right: 20px;
    border: 1px solid #cdccc9;
  }
.pageContainer a.current{
  color: white;
  background: #fb565c;
  color: white;
  border: 1px solid #fb565c;

}

</style>
